// debounceThrottleDirective.js

import _ from 'lodash';

// 创建一个防抖自定义指令
export const debounceClick = {
  mounted(el, binding) {
    const { value, arg } = binding;
    const debouncedHandler = _.debounce(value, arg || 300);
    el._debouncedHandler = debouncedHandler; // 将debouncedHandler保存为el的属性
    el.addEventListener('click', debouncedHandler);
  },
  unmounted(el) {
    el.removeEventListener('click', el._debouncedHandler); // 使用保存在el属性中的handler
  }
};
  
// 创建一个节流自定义指令
export const throttleClick = {
  mounted(el, binding) {
    const { value, arg } = binding;
    const throttledHandler = _.throttle(value, arg || 300);
    el._throttledHandler = throttledHandler; // 将throttledHandler保存为el的属性
    el.addEventListener('click', throttledHandler);
  },
  unmounted(el) {
    el.removeEventListener('click', el._throttledHandler); // 使用保存在el属性中的handler
  }
};
